<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: black;
        }
        .box {
            width: 200px;
            height: 200px;
            padding: 50px;
            background-color: pink;
            border: 10px solid red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- 
        盒模型
        width宽度  height高度  border边框  padding内边距  margin外边距

        书写元素区域：width height
        盒子实体化区域： width height padding border
        实际站位区域：五个全部
        f12可以看盒模型图
    -->

    <!-- 
        宽度width
        auto 计算实际宽度
        px 像素定义
        % 父元素百分比

        如果文字不加width属性 默认为auto div等元素独占一行 width属性的值会自动撑满父元素的width区域
        span等元素不需要独占一行的 width值是内部元素自动撑开的区域
        body不设置width属性会自适应浏览窗口宽度  设置的话会固定
    -->

    <!-- 
        高度height
        auto px %

        特殊应用 不添加height属性 浏览器会默认为元素内容撑开的高度
    -->

    <!-- 
        内边距 padding
        元素边框内部到宽高区域之间的距离
        可以去加载背景 不能书写嵌套的内容

        padding-top:
        padding-right:
        padding-bottom:
        padding-right:

        padding: 10px 20px 30px 40px  顺时针
        padding: 10px 20px 30px  上 左右 下
        padding：10px 20px  上下 左右
        padding：10px  上下左右

        单一属性层叠 后写
    -->

    <!-- 
        边框 border
        盒子实体化最外层
        线的宽度 线的形状 线的颜色
        border:10px solid red;

        border-width:
        四条边可同padding综合写法一致

        border-style: 形状
        none 无线  *
        solid 实线   *
        dashed 虚线  *
        dotted 点状边框
        double 双线 宽度为border-width的值
        groove 3d凹槽边框 护城河
        ridge 3D垄状边框 城墙
        inset 3D内容凹陷效果 
        outset 3D内容突出效果

        border-color: 颜色
        四边可以是不同的颜色 顺时针 对角线平分


        边框方向划分
        单独设置也要跟border一样有三个属性值 不会被对角线划分
        必须先写方向划分再写类型划分
        border-方向-类型:属性值
    -->

    <!-- 
        外边距 margin
        也有四种值的写法
    -->
    <div class="box">
        div标签
    </div>

    <p>111</p>
</body>
</html>